<template>
    <div>
      <city-list-header></city-list-header>
      <city-search :hotCities="hotCity" :cityList="cityList" :letter="letter"></city-search>
      <city-alaph :cityList="cityList" @change="handleLetter"></city-alaph>
    </div>
</template>

<script>
  import  cityListHeader from './components/cityListHeader'
  import  citySearch from './components/citySearch'
  import cityAlaph from './components/cityAlaph'
  import axios from 'axios'
  export default {
      name: "cityList",
      data(){
        return{
          location:'',
          hotCity:[],
          cityList:{},
          letter:''
        }
      },
      components:{
        cityAlaph,
        citySearch,
        cityListHeader
      },
      methods:{
        getInfo(){
          axios.get('../../../static/mock/city.json').then(this.handleInfo)
        },
        handleInfo(res){
          let ress=res.data;
          let data =ress.data
          let alph=[]
          if(ress.ret){
            this.hotCity=data.hotCities;
            this.cityList=data.cities;


          }

        },
        handleLetter(e){
          this.letter=e;
        }
      },
      mounted() {
        this.getInfo()
      }
  }
</script>

<style scoped>

</style>
